﻿body {
    font-family: Verdana, Arial, 'sans serif';
    font-size: 11px;
    color: black;
}

.wjs-abs-stretch-hor {
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
}

.wjs-abs-stretch-hor-ver {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.wjs-abs-stretch-hor-dock-up {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
}

.wjs-abs-stretch-hor-dock-down {
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.wjs-rel-stretch-hor-ver {
    position: relative;
    margin: 0;
    border: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.wjs-rel-stretch-hor-dock-up {
    position: relative;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
}

.wjs-selectable {
    cursor: pointer;
    min-height: 30pt;
}

.wjs-selectable:hover {
    /*background-color: rgb(144,154,181);
    color: rgb(255,255,255);*/
}

.wjs-clickable {
    cursor: pointer;
    min-height: 30pt;
}

.wjs-clickable:hover {
    background-color: lightblue !important;
}

.wjs-selected {
    background-color: blue !important;
    color: white;
}

.wjs-highlightable:hover {
    background-color: #99CCFF;
    color: black;
}

.wjs-rel-stretch-hor {
    position: relative;
}

.w-inline-block {
    display: inline-block;
}

.w-item {
    border: 1px solid red;
    padding: 2px;
    vertical-align: middle;
}

.w-container {
    border: 2px solid green;
}

/*
Fixes the issue that: when float block-level elements within a block-level element, the child elements do not take up any space in their parent
*/
.w-container-float {
    overflow: auto;
}

.wjs-stretch-x {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
}

.wjs-stretch-y {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
}

.wjs-stretch-xy {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: 0;
    bottom: 0;
    height: auto;
}

.wjs-float-left {
    float: left;
}

.wjs-float-right {
    float: right;
}

.w-overflow-auto {
    overflow: auto;
}

.w-overflow-visible {
    overflow: visible;
}

.w-drop-target {
    border: 2px dashed blue;
}

.wjs-flex-row-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.wjs-inline-flex-row-container {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
}

.wjs-icon-default {
    background-image: url('images/application_window.png');
}

.wjs-display-flex {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.wjs-display-flex-1 {
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    width: 20%; /* For old syntax, otherwise collapses. */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.wjs-order-1 { /*To change the order the column is displayed from source code*/
    -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
    -ms-flex-order: 1; /* TWEENER - IE 10 */
    -webkit-order: 1; /* NEW - Chrome */
    order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.wjs-header {
    min-height: 28pt; /* 1 cm */
    font-size: 1.2em;
    font-weight: bold;
}

.wjs-overlay {
    position: absolute;
    width: auto;
    height: auto;
    background-color: beige;
}

.wjs-center {
    position: fixed;
    border-top: 0;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
